<template>
  <div class="media-data">
    <a-form-model ref="ruleForm" :rules="rules" :model="ruleForm">
      <a-row justify="space-between">
        <a-col :span="20" :xl="20">
          <a-form-model-item has-feedback label="时间区间" prop="range" :labelCol="{ span: 2 }" :wrapperCol="{ span: 18 }">
            <a-range-picker
              :inputReadOnly="true"
              :allowClear="false"
              @change="handleTimeChange"
              :placeholder="['开始日期', '结束日期']"
              v-model="ruleForm.range"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-model-item>
            <a-space>
              <a-button @click="resetForm('ruleForm')">
                重置
              </a-button>
              <a-button :loading="isLoading" type="primary" @click="submitForm('ruleForm')">
                查询
              </a-button>
            </a-space>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-row justify="space-between">
      <a-col :span="24">
        <h3>详情列表</h3>
      </a-col>
    </a-row>
    <a-table
      :loading="isLoading"
      :pagination="pagination"
      @change="handleTableChange"
      @expand="expand"
      :rowKey="(record) => record.appKey"
      :columns="columns"
      :data-source="data"
    >
      <a-table
        :loading="innerIsLoading"
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :rowKey="(record) => String(record.appKey)"
        :data-source="record.innerData"
        :pagination="false"
      >
        <span slot="activityJoinUv" slot-scope="_, record">
          <span>{{ record.settleTime || '-' }}</span>
        </span>
        <span slot="advertValidClick" slot-scope="_, record">
          <span>{{ record.advertValidClick ? record.advertValidClick : '-' }}</span>
        </span>
        <span slot="slotIncome" slot-scope="_, record">
          <span>{{ record.slotIncome ? record.slotIncome / 100 : '-' }}</span>
        </span>
        <span slot="slotIncomeUv" slot-scope="_, record">
          <span>{{
            record.slotIncome && record.advertValidClick ? (record.slotIncome / record.advertValidClick / 100).toFixed(2) : '-'
          }}</span>
        </span>
      </a-table>
      <span slot="appName" slot-scope="_, record">
        <span>{{ record.appName == '' ? '-' : record.appName }}</span>
      </span>
      <span slot="advertValidClick" slot-scope="_, record">
        <span>{{ record.advertValidClick ? record.advertValidClick : '-' }}</span>
      </span>
      <span slot="slotIncome" slot-scope="_, record">
        <span>{{ record.slotIncome ? record.slotIncome / 100 : '-' }}</span>
      </span>
      <span slot="slotIncomeUv" slot-scope="_, record">
        <span>{{
          record.slotIncome && record.advertValidClick ? (record.slotIncome / record.advertValidClick / 100).toFixed(2) : '-'
        }}</span>
      </span>
    </a-table>
  </div>
</template>

<script>
import { columns, innerColumns } from './MediaIncomeList'
import { getIncomeApp, getIncomeAppDay } from '@/api/MeidaMan/api'
import 'moment/locale/zh-cn'
import moment from 'moment'
export default {
  name: 'MediaIncomeList',
  data() {
    return {
      data: [],
      columns,
      isLoading: false,
      innerIsLoading: false,
      innerData: [],
      innerColumns,
      id: '',
      key: '',
      ruleForm: {
        range: [moment().subtract(1, 'days'), moment()],
        name: '',
        startTime: moment()
          .subtract(1, 'days')
          .valueOf(),
        endTime: moment().valueOf(),
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      rules: {},
      pagination: {
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => `总共  ${total} 条`, // 显示总数
      },
    }
  },
  filters: {
    /**
     * @func 处理文字
     */

    filersText(val) {
      return val == '' ? '-' : val
    },
  },
  created() {},
  mounted() {
    const urlString = location.href
    if (urlString.indexOf('=') != -1) {
      this.queryUrlSearch(urlString) // 处理参数
    }
    this.appData()
  },
  methods: {
    moment,
    /**
     * @func 展开时调用
     */
    expand(_, record) {
      const { appKey } = record
      const rangeValue = this.ruleForm.range
      const startTime = moment(moment(rangeValue[0]).format('YYYY-MM-DD')).valueOf()
      const endTime = moment(moment(rangeValue[1]).format('YYYY-MM-DD')).valueOf()
      console.log({ startTime, endTime })
      this.appDataDay({ appKey, startTime, endTime })
    },
    /**
     * @func 嵌套列表数据
     */
    async appDataDay(param) {
      this.innerIsLoading = true
      const appKey = param.appKey
      const [err, data] = await getIncomeAppDay({ ...param })
      if (!err) {
        const innerData = data.list
        this.innerIsLoading = false
        if (innerData.length) {
          // const adId = innerData[0].appKey
          const i = this.data.findIndex((item) => {
            return item.appKey === appKey
          })
          this.data = [...this.data.slice(0, i), { ...this.data[i], innerData: innerData }, ...this.data.slice(i + 1)]
        }
      } else {
        this.innerIsLoading = false
        this.$msgErr(err)
      }
    },
    /**
     * @func 查询应用数据列表
     */
    async appData(param) {
      this.isLoading = true
      const [err, data] = await getIncomeApp({ ...param })
      if (!err) {
        const { list, count } = data
        const pager = { ...this.pagination }
        pager.total = count
        this.isLoading = false
        if (list) {
          this.data = list ?? []
        }
      } else {
        this.isLoading = false
        this.$msgErr(err)
      }
    },
    /**
     * @func 查询数据
     */
    submitForm() {
      const { startTime: start, endTime: end, ...param } = this.ruleForm
      const startTime = moment(moment(start).format('YYYY-MM-DD')).valueOf()
      const endTime = moment(moment(end).format('YYYY-MM-DD')).valueOf()
      const values = {
        param,
        startTime,
        endTime,
      }
      delete values['range']
      this.appData(values)
    },
    /**
     * @func 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      /*  this.pageNo = 1
      this.pageSize = 10 */
      this.appData()
    },
    /**
     * @func 时间选择
     */
    handleTimeChange(_, dateStrings) {
      console.log(this.ruleForm.startTime)
      this.ruleForm.startTime = moment(dateStrings[0]).valueOf()
      this.ruleForm.endTime = moment(dateStrings[1]).valueOf()
    },
    /**
     * @func 分页处理
     */
    async handleTableChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.appData({ pageNo: pagination.current, pageSize: pagination.pageSize })
    },
    /**
     * @func 获取url参数
     */
    queryUrlSearch(urlString) {
      console.log(urlString)
      const urlArr = urlString.split('=')
      console.log(urlArr)
      this.key = urlArr[1]
    },
  },
}
</script>

<style>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
